<template>
  <div class="mine-box vacancy-box">
    <router-link to="/vainvest">
      <div id="tixian">充值</div>
    </router-link>
    <div class="user-box-title" :style="back">
      <userinfo></userinfo>
      <div class="m-moneybox">
        <mu-row>
          <mu-col span="6">
            <div class="grid-cell">
              <div class="m-title">卡余额(元)</div>
              <div class="m-des">{{cardamount}}</div>
            </div>
          </mu-col>
          <mu-col span="6">
            <div class="grid-cell" style="border-left:1px solid #2E84D3;">
              <div class="m-title">余额(元)</div>

              <div class="m-des">{{amount}}</div>
            </div>
          </mu-col>
        </mu-row>
      </div>
    </div>
    <div class="mx-list List-c">
      <div class="title-box">
        <p>收支明细</p>
      </div>
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list class="chongzhibox">
          <mu-list-item v-for="(item,index) in orderList" :key="index">
            <mu-list-item-content>
              <div class="fleft">
                <div class="iconfont-box fleft" :style="item.dataType|color">
                  <span :class="item.dataType|icon"></span>
                </div>
                <div class="data fleft">
                  <p v-if="item.dataType==1" class="data-title">
                    卡号: {{item.cardNo}}

                  </p>
                  <p v-else class="data-title">
                    账号充值

                  </p>

                  <p class="data-time">{{item.createTime}}</p>
                </div>
                <div class="_clear"></div>
              </div>
              <div class="fright">
                <p style="color:#1EC5F1"> ¥{{item.quantity}}</p>
                <p><span class="ordertype">{{item.type|type}}</span></p>

              </div>
              <div class="_clear"></div>
            </mu-list-item-content>
          </mu-list-item>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无充值记录</p>
          </div>
        </mu-list>
      </mu-load-more>
    </div>
  </div>
</template>

<script>
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";

    export default {
        data() {
            return {
                amount: 0,
                cardamount: 0,
                amount: 0,
                nolist: true,

                page: 0,
                loaded_all: false,
                refreshing: false,
                loading: false,
                back: {
                    background:
                        "url(" + require("../../../assets/image/minebackimg.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                orderList: []
            };
        },
        // filters: {

        //   state(v){
        //     switch (v) {
        //       case '1':
        //         return (v = "待支付");
        //         break;
        //       case '2':
        //         return (v = "已完成");
        //         break;

        //     }
        //   }
        // },
        mounted() {
            this.$api.queryAccountBalance().then(res => {
                this.cardamount = res.data.result.cardAmount;
                this.amount = res.data.result.accountAmount;
            });
            this.getList();
        },
        methods: {
            getList() {
                this.$api.rechargeRecord(this.page).then(res => {
                    // this.orderList = res.data.result.data;

                    if (res.data.code == 0) {
                        res.data.result.data.forEach(e => {
                            this.orderList.push(e)
                        });
                    } else {
                        Toast('已加载全部数据');
                        this.loaded_all = true;
                    }


                    console.log(res);
                });
            },
            refresh() {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.getList();
                }, 2000);
            },
            load() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.page += 1;
                    this.getList();
                }, 2000);
            }
        },
        watch: {
            orderList: function (v) {
                if (v == "") {
                    this.nolist = true;
                } else {
                    this.nolist = false;
                }
            },

        },
        filters: {
            color: function (v) {
                switch (v) {
                    case 1:
                        return "background: rgba(49, 209, 158, 1);";
                        break;

                    default:
                        return "background:rgba(207,156,115,1);";
                        break;
                }
            },
            icon: function (v) {
                switch (v) {
                    case 1:
                        return "icon-kahao iconfont";
                        break;

                    default:
                        return "icon-zhanghu iconfont";
                        break;
                }
            },
            type: function (v) {
                switch (v) {
                    case 0:
                        return "充值";
                        break;
                    case 1:
                        return "消费";
                        break;
                    case 2:
                        return "赠送";
                        break;
                    case 3:
                        return "系统充值";
                        break;
                    case 4:
                        return "退款";
                        break;
                    case 5:
                        return "退款失败";
                        break;
                    case 6:
                        return "转款";
                        break;
                    default:
                        return "";
                        break;
                }
            }
        }
    };
</script>

<style>
</style>
